<template>
  <div class="add">
    <!-- 步骤条 -->
    <el-steps :active="active" simple>
      <el-step title="基本信息" icon="el-icon-info"></el-step>
      <el-step title="商品参数" icon="el-icon-document"></el-step>
      <el-step title="商品属性" icon="el-icon-tickets"></el-step>
      <el-step title="商品管理" icon="el-icon-setting"></el-step>
      <el-step title="商品内容" icon="el-icon-picture"></el-step>
    </el-steps>

    <!-- tab卡片化 -->
    <el-tabs @tab-click="handleTabClick" tab-position="left" type="border-card" class="mt-15 mb-15">
      <el-tab-pane label="基本信息">基本信息</el-tab-pane>
      <el-tab-pane label="商品参数">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性">商品属性</el-tab-pane>
      <el-tab-pane label="商品管理">角色管理</el-tab-pane>
      <el-tab-pane label="商品内容">
        <!-- 上传组件 -->
        <el-upload
          :headers="headers"
          :action="uploadUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList2"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      headers: { Authorization: localStorage.getItem('mytoken') },
      uploadUrl: 'http://localhost:8888/api/private/v1/upload',
      active: 0, // 步骤条高亮，联动tab栏
      fileList2: []
    }
  },
  methods: {
    // tab栏点击事件，联动步骤条
    handleTabClick (tab) {
      this.active = parseInt(tab.index)
    },
    // 图片移除
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.$message.success('已移除')
    },
    // 图片预览
    handlePreview (file) {
      console.log(file)
    },
    // 上传之前
    beforeUpload (file) {
      // console.log(file)
      // 判断图片格式
      if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
        this.$message.error('请上传jpg、png格式图片')
        return false
      }
      // 判断图片大小
      if (file.size > 500 * 1024) {
        this.$message.error('请上传小于 500kb 的图片')
        return false
      }
    },
    // 上传成功
    uploadSuccess (response, file, fileList) {
      // console.log(response, file, fileList)
      if (response.meta.status === 200) {
        this.$message.success(response.meta.msg)
      } else {
        this.$message.error(response.meta.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs {
  height: auto;
  .el-tab-pane {
    height: 100%;
  }
}
</style>
